<template>
  <div class="qiandao">
    <div class="main">
      <div>
        <van-notice-bar
          left-icon="volume-o"
          text="温馨提示：如果未获取到当日待签到订单,请进行查询，至少输入两项条件查询。"
        />
      </div>
      <div class="serach">
        <div class="searchitem">
          <input type="text" placeholder="姓  名" v-model="name" />
        </div>
        <div class="searchitem">
          <input type="text" placeholder="手 机 号" v-model="phone" />
        </div>
        <div class="searchitem">
          <input type="text" placeholder="身份证号" v-model="card" />
        </div>
      </div>
      <div class="searchbtns" @click="search()">搜索</div>
      <div>
        <div class="list" v-if="orderlist.length > 0">
          <div class="item" v-for="item in orderlist" :key="item.orderId">
            <div class="itemtop">
              <div class="itemytopl">就诊医院：{{ item.hospitalName }}</div>
              <div class="itemytopr">就诊日期：{{ item.treatDate }}</div>
            </div>
            <div class="info">就诊 人：{{ item.name }}</div>
            <div class="info">坐诊医生：{{ item.doctorName }}</div>
            <div class="info">就诊科室：{{ item.departmentName }}</div>
            <div class="info">就诊时间：{{ item.treatTime }}</div>
            <div class="btns">
              <div
                class="qian"
                v-if="item.signState == '1'"
                style=" background-color: #76e35b;"
              >
                已签到
              </div>
              <div
                class="qian"
                @click="qiandao(item)"
                v-if="item.signState == '2'"
              >
                签到
              </div>
              <div class="xiang" @click="godingdandetail(item)">预约详情</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="med-content" v-if="orderlist.length > 0">
        <ul>
          <li
            v-for="item in orderlist"
            :key="item.orderId"
            @click="godingdandetail(item)"
          >
            <div class="left">
              <div class="hospitalname">医 生：{{ item.doctorName }}</div>

              <div class="hospitalname">就 诊 人：{{ item.name }}</div>
              <div class="hospitalname">科 室：{{ item.departmentName }}</div>
              <div class="time">
                就 诊 时 间： {{ item.treatDate }}
                <span>{{ item.treatTime }}</span>
              </div>
            </div>
            <div
              class="right"
              v-if="item.signState == '2'"
              @click="qiandao(item)"
            >
              签到
            </div>
            <div
              class="right"
              style="background: #7de55d"
              v-if="item.signState == '1'"
            >
              已签到
            </div>
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>
<script>
import {
  getqiandaoorderApi,
  qiandaoApi,
  serqiandaoApi
} from "@/service/api.js";
import { Field } from "vant";
import { Cell, CellGroup } from "vant";
import { Switch } from "vant";
import { Picker } from "vant";
import { Popup } from "vant";
import { Toast, Dialog, NoticeBar } from "vant";
export default {
  name: "index",
  data() {
    return {
      hosid: "",
      token: "",
      msg: "",
      name: "",
      phone: "",
      card: "",
      orderlist: []
    };
  },
  components: {},
  created() {
    let token = localStorage.getItem("token");
    // let token =
    //   "eyJhbGciOiJIUzI1NiJ9.eyJwaG9uZSI6IjE4NjI0OTA3MzAxIiwiZXhwIjoxNjM4Nzc1OTcxLCJ1c2VyaWQiOiJmZjgwODA4MTdiN2M3NjU3MDE3YjdjN2E4ODViMDFhZCIsImlhdCI6MTYzNzA0Nzk3MSwianRpIjoiMjUyY2Q2ZGEtNGQyNS00NDU0LWIzMWQtMTEyZDQ3YWIxMmQxIn0.qmi0NgWsicuzYDDQMnWcR4UyJyPatFDJ5-OkYtfNvjs";
    let hosqianid = localStorage.getItem("hosqianid");

    this.hosid = hosqianid;
    if (token) {
      this.token = token;
    }
    let name = localStorage.getItem("qianname");
    let phone = localStorage.getItem("qianphone");
    let card = localStorage.getItem("qiancard");
    if (name) {
      this.name = name;
    }
    if (phone) {
      this.phone = phone;
    }
    if (card) {
      this.card = card;
    }
    let num =
      Number(Boolean(this.name)) +
      Number(Boolean(this.phone)) +
      Number(Boolean(this.card));
    if (num >= 2) {
      this.search();
    } else {
      this.getorder();
    }
  },
  methods: {
    search() {
      let num =
        Number(Boolean(this.name)) +
        Number(Boolean(this.phone)) +
        Number(Boolean(this.card));
      var msg = "";
      if (num >= 2) {
        let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (this.phone) {
          if (!regPhone.test(this.phone)) {
            msg = "请输入正确的手机号";
            Toast.fail("请输入正确的手机号");
          }
        }
        if (this.name) {
          if (this.name.indexOf(" ") == -1) {
            console.log(this.name);
          } else {
            msg = "名字有空格";
            Toast.fail("名字有空格");
          }
        }
        if (this.card) {
          var idCard = this.card;
          idCard = idCard.toUpperCase(); // 转大写
          let len = idCard.length;
          let city = {
            11: "北京",
            12: "天津",
            13: "河北",
            14: "山西",
            15: "内蒙古",
            21: "辽宁",
            22: "吉林",
            23: "黑龙江 ",
            31: "上海",
            32: "江苏",
            33: "浙江",
            34: "安徽",
            35: "福建",
            36: "江西",
            37: "山东",
            41: "河南",
            42: "湖北",
            43: "湖南",
            44: "广东",
            45: "广西",
            46: "海南",
            50: "重庆",
            51: "四川",
            52: "贵州",
            53: "云南",
            54: "西藏 ",
            61: "陕西",
            62: "甘肃",
            63: "青海",
            64: "宁夏",
            65: "新疆",
            71: "台湾",
            81: "香港",
            82: "澳门",
            91: "国外"
          };
          //1. 判断长度
          if (len !== 15 && len !== 18) {
            msg = "请输入正确的证件号";
            Toast.fail("请输入正确的证件号");
          }
          //2. 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
          if (!/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(idCard)) {
            msg = "请输入正确的证件号";
            Toast.fail("请输入正确的证件号");
          }
          //3. 地址码
          if (!city[idCard.substr(0, 2)]) {
            msg = "请输入正确的证件号";
            Toast.fail("请输入正确的证件号");
          }

          let re;
          //4. 生日
          if (len === 15) {
            re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
            let arrSplit = idCard.match(re);

            //检查生日日期是否正确
            let birth = new Date(
              "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
            );
            let isBirth =
              birth.getYear() === Number(arrSplit[2]) &&
              birth.getMonth() + 1 === Number(arrSplit[3]) &&
              birth.getDate() === Number(arrSplit[4]);
            if (!isBirth) {
              msg = "请输入正确的证件号";
              Toast.fail("请输入正确的证件号");
            }
          } else if (len === 18) {
            re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
            let arrSplit = idCard.match(re);

            //检查生日日期是否正确
            let birth = new Date(
              arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
            );
            let isBirth =
              birth.getFullYear() === Number(arrSplit[2]) &&
              birth.getMonth() + 1 === Number(arrSplit[3]) &&
              birth.getDate() === Number(arrSplit[4]) &&
              birth.getTime() < new Date().getTime();
            if (!isBirth) {
              console.log(isBirth);
            } else {
              //检验18位身份证的校验码是否正确。
              //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
              let valnum;
              let arrInt = [
                7,
                9,
                10,
                5,
                8,
                4,
                2,
                1,
                6,
                3,
                7,
                9,
                10,
                5,
                8,
                4,
                2
              ];
              let arrCh = [
                "1",
                "0",
                "X",
                "9",
                "8",
                "7",
                "6",
                "5",
                "4",
                "3",
                "2"
              ];
              let nTemp = 0,
                i;
              for (i = 0; i < 17; i++) {
                nTemp += idCard.substr(i, 1) * arrInt[i];
              }
              valnum = arrCh[nTemp % 11];
              if (valnum !== idCard.substr(17, 1)) {
                msg = "请输入正确的证件号";
                Toast.fail("请输入正确的证件号");
              }
            }
          }
        }
      } else {
        msg = "请至少输入两个条件查询";
        Toast.fail(msg);
      }

      if (msg == "") {
        serqiandaoApi({
          signHospitalId: this.hosid,
          // token: this.token,
          name: this.name,
          phone: this.phone,
          cardNo: this.card
        }).then(res => {
          console.log(res);
          if (res.code == 4003) {
            Toast(res.msg);
          } else {
            localStorage.setItem("qianname", this.name);
            localStorage.setItem("qianphone", this.phone);
            localStorage.setItem("qiancard", this.card);
            this.orderlist = res.list;
          }
          // if (this.orderId.length == 0) {
          // }
        });
      }
    },
    godingdandetail(item) {
      // if (item.signState == "1") {
      this.$router.push({
        name: "qianinfo"
        // query: {
        //   info: item
        // }
      });
      let itemm = JSON.stringify(item);
      localStorage.setItem("qiandaoinfo", itemm);
      // }

      // }
    },
    qiandao(item) {
      qiandaoApi({
        signHospitalId: this.hosid,
        // token: this.token,
        orderId: item.orderId
      }).then(res => {
        if (res.code == 4000) {
          let signTime = res.data.signTime;
          for (var i = 0; i < this.orderlist.length; i++) {
            if (this.orderlist[i].orderId == item.orderId) {
              this.orderlist[i].signState = "1";
              this.orderlist[i].signTime = signTime;
              let itemm = JSON.stringify(this.orderlist[i]);
              localStorage.setItem("qiandaoinfo", itemm);
            }
          }

          this.$router.push({
            name: "qiandaodetail"
            // query: {
            //   info: item
            // }
          });

          // this.getorder();
        } else {
          Toast(res.msg);
        }
      });
    },

    getorder() {
      getqiandaoorderApi({
        signHospitalId: this.hosid,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          this.orderlist = res.data.list;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.qiandao {
  width: 100%;
  background: #eef2f5;
  padding-bottom: 0.6rem;
  .list {
    width: 100%;
    margin-top: 0.3rem;
    .item {
      width: 8.5rem;
      padding: 0.1rem;
      background-color: #fff;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 0.2rem;
      .itemtop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #b6b6b6;

        .itemytopl {
          font-size: 0.35rem;
          color: #b6b6b6;
          line-height: 1rem;
        }
        .itemytopr {
          font-size: 0.35rem;
          color: #b6b6b6;
          line-height: 1rem;
        }
      }
      .info {
        font-size: 0.35rem;
        line-height: 1rem;
        color: #666666;
      }
      .btns {
        margin-left: 4.5rem;
        display: flex;
        padding-bottom: 0.2rem;
        .qian {
          width: 1.5rem;
          height: 0.6rem;
          font-size: 0.3rem;
          background-color: #07c6b4;
          color: #fff;
          text-align: center;
          line-height: 0.6rem;
          border-radius: 10px;
        }
        .xiang {
          width: 1.5rem;
          height: 0.6rem;
          font-size: 0.3rem;
          border: 1px solid #b6b6b6;
          border-radius: 10px;
          color: #b6b6b6;
          text-align: center;
          line-height: 0.6rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
  .serach {
    width: 8.2rem;
    margin-top: 0.2rem;
    margin: 0 auto;
    .searchitem {
      height: 1rem;
      margin: 0 auto;
      margin-top: 0.4rem;
      input {
        margin: 0 auto;
        width: 8rem;
        padding: 0.1rem;
        line-height: 1rem;
        font-size: 0.35rem;
        border: 1px solid #fff;
        border-radius: 10px;
      }
    }
  }
  .searchbtns {
    width: 8rem;
    margin: 0 auto;
    font-size: 0.4rem;
    color: #fff;
    line-height: 1rem;
    background-color: #07c6b4;
    margin-top: 0.5rem;

    border-radius: 10px;
    text-align: center;
  }
  .med-content {
    padding-top: 10px;
    ul {
      li {
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
        background: #ffffff;
        margin-bottom: 11px;
        .left {
          margin-left: 10px;
          .title {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #07c6b4;
            padding-top: 10px;
            margin-bottom: 10px;
          }
          .hospitalname {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 11px;
          }
          .time {
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
        .right {
          margin-top: 32px;
          margin-right: 10px;
          width: 92px;
          height: 30px;
          background: #07c6b4;
          border-radius: 13px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
